<template>
    <div class="new-create">
        <el-form ref="form" :model="article" @submit.native.prevent="saveArticle" label-width="80px">
            <h1 class="h11">编辑内容</h1>
            <el-form-item label="文章名称">
                <el-input v-model="article.title"></el-input>
            </el-form-item>
            <el-form-item label="文章内容">
                <el-input type="textarea" v-model="article.body"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">保存修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>

<script>
export default {
     data() {
      return {
        article: {
        }
      }
    },
    methods: {
      saveArticle() {
          this.$http.put(`/articles/${this.$route.params.id}`,this.article).then(res=>{
              this.$message({
                    message: '修改文章成功',
                    type: 'success'
                    })
                    this.$router.push('/articles/index')
          })
      },
      fetch(){
          this.$http.get(`/articles/${this.$route.params.id}`).then(res=>{
              this.article=res.data
          })
      }
      },
      created(){
          this.fetch()
      }
    }

</script>

<style lang="less" scoped>

    .new-create{
        margin-top: 10px !important;
    }

    .el-form-item{
        width: 90%;
    }
    .h11{
        line-height: 110px;
    }

</style>